<template>
  <div id="app">
    <router-view></router-view>
    <nav class="nav border-1px">
      <router-link to="/" class="links">
        <i class="iconfont enter"></i>
        <span>报名</span>
      </router-link>
      <router-link to="/sign" class="links">
        <i class="iconfont signin"></i>
        <span>签到</span>
      </router-link>
      <router-link to="/query" class="links">
        <i class="iconfont query"></i>
        <span>查询</span>
      </router-link>
      <router-link to="/other" class="links">
        <i class="iconfont other"></i>
        <span>其他</span>
      </router-link>
    </nav>
  </div>
</template>
<style lang="less" rel="stylesheet/less">
  @import '../assets/less/app.less';

  #app {
    width: 375/@base;
    height: 100%;
    overflow: hidden;
    .nav {
      background: #f9f9f9;
      position: fixed;
      height: 49/@base;
      width: 375/@base;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .links {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #686f7e;
        i {
          height: 24/@base;
        }
        span{
          font-size: 10px;
        }
        &.links .signin:after {
          content: '\e605';
          text-align: center;
        }
        &.links .enter:after {
          content: '\e603';
        }
        &.links .query:after {
          content: '\e606';
        }
        &.links .other:after {
          content: '\e600';
        }
        &.router-link-exact-active {
          color: #00b38a;
        }
        &.router-link-exact-active i.enter:after {
          content: '\e601';
        }
        &.router-link-exact-active i.signin:after {
          content: '\e604';
        }
        &.router-link-exact-active i.query:after {
          content: '\e607';
        }
        &.router-link-exact-active i.other:after {
          content: '\e602';
        }
      }
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all .2s ease;
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
</style>
